<template>
  <a-modal
    :title="title"
    :width="modalWidth"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :rules="validatorRules">
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="报告分类">
          <a-row>
            <a-col :span="24">
              <a-radio-group v-model="typeValue" @change="typeChange">
                <a-radio :value="1">
                  按年
                </a-radio>
                <a-radio :value="2">
                  按月
                </a-radio>
              </a-radio-group>
            </a-col>
          </a-row>
        </a-form-model-item>
        <a-form-model-item v-if="typeValue==1" :labelCol="labelCol" :wrapperCol="wrapperCol" label="年份" prop="yeardate">
          <a-row>
            <a-col :span="24">
              <a-date-picker
                mode="year"
                placeholder="请选择年份"
                format="YYYY"
                v-model="model.yeardate"
                style="width:100%"
                :open="yearShowOne"
                @openChange="openChangeOne"
                @panelChange="panelChangeOne"
              />
            </a-col>
          </a-row>
        </a-form-model-item>
        <a-form-model-item v-if="typeValue==2" :labelCol="labelCol" :wrapperCol="wrapperCol" label="月份" prop="monthdate">
          <a-row>
            <a-col :span="24">
              <a-month-picker
                placeholder="请选择月份"
                format="YYYY-MM"
                v-model="model.monthdate"
                style="width:100%"
                @panelChange="panelChangeTwo"
              />
            </a-col>
          </a-row>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import { getAction } from '@/api/manage'
import moment from 'moment'

export default {
  name: 'ExportReport',
  components: {
  },
  data() {
    return {
      title: '导出数据报告',
      typeValue: 1,
      model: {
        yeardate: undefined,
        monthdate: undefined
      },
      modalWidth: 460,
      visible: false,
      confirmLoading: false,
      yearShowOne: false,
      validatorRules: {
        yeardate: [
          { required: true, message: '请选择年份!', trigger: 'change' }
        ],
        monthdate: [
          { required: true, message: '请选择月份!', trigger: 'change' }
        ]
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      url: {
        getReportUrl: '/exp/expSjbg',
        getMonthReportUrl: '/exp/expBgByYearMonth'
      }
    }
  },
  created () {
     // 备份model原始值
    // this.modelDefault = JSON.parse(JSON.stringify(this.model))
  },
  methods: {
    moment,
    show() {
      this.visible = true
    },
    handleCancel() {
      this.close()
    },
    close() {
      this.$emit('close')
      this.visible = false
      this.resetForm()
      this.disableSubmit = false
    },
    typeChange(e) {
      this.resetForm()
    },
    openChangeOne(status) {
      // status是打开或关闭的状态
      if (status) {
        this.yearShowOne = true
      } else {
        this.yearShowOne = false
      }
    },
    // 得到年份选择器的值
    panelChangeOne(value) {
      this.model.yeardate = moment(value).format('YYYY')
      this.yearShowOne = false
    },
    panelChangeTwo(value) {
      if (value !== '') {
        this.model.monthdate = moment(value).format('YYYY-MM')
      }
    },
    handleOk() {
      const _this = this
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          let yearValue = _this.model.yeardate
          let monthVaue = moment(_this.model.monthdate).format('YYYY-MM')
          if (_this.typeValue == 1) {
            getAction(_this.url.getReportUrl, { year: yearValue }).then(res => {
              _this.handleExport(res, 'year', yearValue)
            })
          } else if (_this.typeValue == 2) {
            getAction(_this.url.getMonthReportUrl, { yearMonth: monthVaue }).then(res => {
              _this.handleExport(res, 'month', monthVaue)
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm() {
      this.$refs.form.resetFields()
    },
    /**
    * 导出数据报告
    * @param data 文件地址
    * @param type year「按年」 month「按月」
    * @param time 下载文件名上的年份或月份
    **/
    handleExport(data, type = 'year', time) {
      let link = document.createElement('a')
      let blob = new Blob([data], { type: 'application/msword' })
      link.style.display = 'none'
      link.href = URL.createObjectURL(blob)
      if (type == 'year') {
        link.setAttribute('download', time + '年数据报告.doc')
      } else if (type == 'month') {
        let timeArr = time.split('-')
        let y = timeArr[0]
        let m = timeArr[1]
        link.setAttribute('download', y + '年' + m + '月数据报告.doc')
      }
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
  }
}
</script>

<style scoped></style>
